<template>
  <div class="commonLogin">
    <div class="iconfont icon-erweimajiaobiao" @click="handleOne"></div>
    <h1>千锋管理系统</h1>
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="username">
        <el-input
          type="text"
          v-model="ruleForm.username"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="ruleForm.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="captcha">
        <el-input v-model.number="ruleForm.captcha" type="text"></el-input>
        <i v-html="captcha" @click="getCaptcha"></i>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
    <div class="switch" @click="handleThree">切换短信登入</div>
    <!-- <button @click="handleThree">切换短信登入</button> -->
  </div>
</template>
   
<script>

import * as api from "@/api/users"
import storage from "../../utils/storage"
var validateCaptcha = (rule, value, callback) => {
  if (value.length === 5) {
    callback();
	} else {
		callback("验证码必须是5位");
	}
};
var validateUsername = (rule, value, callback) => {
  let uPattern = /^[a-zA-Z0-9_-]{3,16}$/;
  if (uPattern.test(value)) {
    callback();
  } else {
    callback("3-16字母数字下划线");
  }
  
};
var validatePassword = (rule, value, callback) => {
  if (value.length < 3) {
		callback("密码长度不能小于3位");
	} else {
		callback();
	}
};
export default {
  mounted(){
   this.getCaptcha()
  },
  data() {
    return {
      captcha:"",
      ruleForm: {
        username: "",
        password: "",
        captcha: "",
      },
      rules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        password: [{ validator: validatePassword, trigger: "blur" }],
        captcha: [{ validator: validateCaptcha, trigger: "blur" }],
      },
    };
  },
  methods: {
    //封装一个方法，用于存储用户的信息和token
    storageUserInfo({userInfo,token,permission}){
      storage.set("userInfo",userInfo)
      storage.set('qf-token',token)
      storage.set('permission',permission)
    },
    //获取验证码
    getCaptcha(){
       api.getCaptcha()
      .then(res=>{
        // console.log(res);
        this.captcha = res.data.img
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert("submit!");
          api.verifyCaptcha(this.ruleForm.captcha)
          .then(async res=>{
            if(res.data.state){
              //验证吗通过，校验用户名和密码
              let {username,password} = this.ruleForm
              let res = await api.loginApi(username,password)
              console.log(res);
              if(res.data.state){
                //存储用户信息到本地
                this.storageUserInfo(res.data)
                //跳转到主页
                this.$router.push("/home")
              }
            }else{
              //验证码不通过 刷新验证码
              this.getCaptcha()
            }
          })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleOne(){
      this.$parent.one=false;
      this.$parent.two=true;
    },
    handleThree(){
      this.$parent.one=false;
      this.$parent.two=false;
      // this.$parent.three=true;
    }
  },
};
</script>
<style lang='less' scoped>
.el-input__innerr{
  padding: 0 !important;;
}
.commonLogin {
  border: 1px solid white !important;

  position: fixed;
  right: 50px;
  top: 200px;
  width: 400px;
  height: 400px;
  color: white !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  background-color: rgba(0, 0, 0, 0.5);
  /deep/.icon-erweimajiaobiao {
    font-size: 60px;
    position: absolute;
    right: 0;
    top: 0;
  }
  .demo-ruleForm {
    width: 300px;
    margin-right: 80px;
    .el-form-item {
      position: relative;
      // width: 270px !important;
      /deep/.el-form-item__label {
        color: white !important;
      }
      .el-button {
        width: 100%;
      }
      i{
        height:100%;
        width:50%;
        position:absolute;
        top:0;
        right:0;
        // background-color: red;
        cursor: pointer;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        /deep/svg{
          height:40px !important;
          width:100px !important;
        }
      }
    }
  }
  .switch{
    cursor:pointer;
  }
}
</style>